<!-- 
@name: 民营经济
-->
<template>
	<div :id="$store.state.oldPage ? 'MarketService_old' : 'MarketService'" class="page">
		<HomeBanner></HomeBanner>

		<div class="content">
			<div class="fwjg">
				<div class="content">
					<div class="title flex-between">
						<div class="text1">慧企政策</div>
						<div class="text2" @click="moreList('SCZX')">更多</div>
					</div>
					<articlePage ref="articlePage" :type="'SCZX'"></articlePage>
				</div>
				<div class="content">
					<div class="title flex-between">
						<div class="text1">人才资讯</div>
						<!-- <div class="text2" @click="moreList('RCPX')">更多</div> -->
						<div class="text2" @click="jump('/nonPublicEconomy/trainingtalent')">更多</div>
					</div>
					<!-- <articlePage ref="articlePage" :type="'RCPX'"></articlePage> -->
					<articlePageRcpx ref='articlePage' listWrapHeight="13rem" :type="'RCPX'"></articlePageRcpx>

				</div>
				<div class="content">
					<div class="title flex-between">
						<div class="text1">法律案例</div>
						<div class="text2" @click="moreList('ALZS')">更多</div>
					</div>
					<articlePage ref="articlePage" :type="'ALZS'"></articlePage>
				</div>
			</div>
		</div>
		<bottomText></bottomText>

	</div>
</template>
<script>
import { mapState } from 'vuex';
import HomeBanner from '@/components/global/HomeBanner';
import articlePage from '@/components/global/articlePage_vanList';
import articlePageRcpx from '@/views/nonPublicEconomy/sub/trainingtalent_vanList';
import bottomText from '@/components/global/bottomText';
import Qs from 'qs'; //引入qs  时axios的自带模块
export default {
	name: 'app',
	components: {
		HomeBanner,
		articlePage,
		bottomText,
		articlePageRcpx,
	},
	data() {
		return {
			activeName: '',
			articleList: [],
			loading: false,
			finished: false,
			searchKey: '',
			searchData: {
				page: 1,
				limit: 2,
				searchServerType: '', //TRADEMARK：商标服务；INTEL：知识产权服务、ADVISORY：管理咨询服务
			},
			TRADEMARKList: [],
			INTELList: [],
			ADVISORYList: [],
		};
	},

	created() {
		this.list_company('TRADEMARK');
		this.list_company('INTEL');
		this.list_company('ADVISORY');
		if (this.$route.query.activeName) {
			this.activeName = this.$route.query.activeName;
		}
	},
	methods: {
		tabsChange(e) {
			console.log(e);
			this.$router.push({
				path: '/nonPublicEconomy/index',
				query: { activeName: this.activeName },
			});
		},
		onSubmit(values) {
			console.log('submit', values);
		},
		list_company(searchServerType) {
			var params = this.searchData;
			params.searchServerType = searchServerType;
			this.$myApi.list_company(params).then((res) => {
				if (res.code == 200) {
					if (searchServerType == 'TRADEMARK') {
						this.TRADEMARKList = res.data;
					} else if (searchServerType == 'INTEL') {
						this.INTELList = res.data;
					} else if (searchServerType == 'ADVISORY') {
						this.ADVISORYList = res.data;
					}
				} else {
				}
			});
		},
		jump(path, name) {
			this.$router.push({ path: path, query: { topBarName: name } });
		},
	},
};
</script>
<style lang="less" scoped>
@color-blue: #00a0e9;
@shadow:0px 1px 7px 2px rgba(0, 0, 0, 0.03);

#MarketService {
	padding-left: 0.2rem;
	padding-right: 0.2rem;

	.content {
		// min-height: 100vh;
		.scfw {
			// 市场服务
			.top {
				display: grid;
				grid-template-columns: repeat(auto-fit, 32%);
				grid-gap: 2%;
				.item {
					background: #ffffff;
					height: 1.4rem;
					box-shadow: @shadow;
					border-radius: 15px;
					font-size: 0.3rem;
					.icon1 {
						height: 0.5rem;
						width: 0.5rem;
						margin-right: 0.1rem;
					}
					.icon2 {
						height: 0.55rem;
						width: 0.43rem;
						margin-right: 0.1rem;
					}
					.icon3 {
						height: 0.45rem;
						width: 0.47rem;
						margin-right: 0.1rem;
					}
				}
			}
			.center {
				width: 100%;
				height: 0.75rem;
				position: relative;
				margin-top: 0.5rem;
				.icon1 {
					width: 0.32rem;
					height: 0.33rem;
					position: absolute;
					left: 0.3rem;
					top: 0.2rem;
				}
				.input {
					padding-left: 0.8rem;
					border-radius: 38px;
					box-shadow: @shadow;
					width: 100%;
					height: 100%;
					background: #ffffff;
					border: none;
				}
				.button {
					position: absolute;
					right: 0.4rem;
					top: 0.2rem;
					color: @color-blue;
				}
			}
			.bottom {
				margin-top: 0.55rem;
				padding: 0.4rem 0.3rem;
				width: 100%;
				box-shadow: @shadow;
				border-radius: 15px;

				.title {
					margin-bottom: 0.5rem;
					.text1 {
						font-size: 0.3rem;
						color: #111111;
					}
					.text2 {
						font-size: 0.25rem;
						color: #aaaaaa;
					}
				}
				// .item {
				// 	width: 100%;
				// 	margin-bottom: 0.8rem;
				// 	position: relative;
				// 	img {
				// 		width: 1.8rem;
				// 		height: 1.2rem;
				// 		margin-right: 0.15rem;
				// 	}
				// 	.text1 {
				// 		display: -webkit-box;
				// 		-webkit-box-orient: vertical;
				// 		-webkit-line-clamp: 2;
				// 		overflow: hidden;
				// 		font-size: 0.28rem;
				// 		color: #111111;
				// 		font-weight: bold;
				// 		margin-bottom: 0.1rem;
				// 	}
				// 	.text2 {
				// 		font-size: 0.23rem;
				// 		width: 50%;
				// 		color: #aaaaaa;
				// 		display: -webkit-box;
				// 		-webkit-box-orient: vertical;
				// 		-webkit-line-clamp: 1;
				// 		overflow: hidden;
				// 	}
				// }
			}
		}
		.qyfn {
			// 企业赋能
			.top {
				display: grid;
				grid-template-columns: repeat(auto-fit, 49%);
				grid-gap: 2%;
				.item {
					background: #ffffff;
					height: 1.4rem;
					box-shadow: @shadow;
					border-radius: 15px;
					font-size: 0.3rem;
					margin-bottom: 0.43rem;
					.icon1 {
						width: 0.6rem;
						height: 0.46rem;
						margin-right: 0.1rem;
					}
					.icon2 {
						width: 0.4rem;
						height: 0.47rem;
						margin-right: 0.1rem;
					}
					.icon3 {
						width: 0.57rem;
						height: 0.56rem;
						margin-right: 0.1rem;
					}
					.icon4 {
						width: 0.49rem;
						height: 0.45rem;
						margin-right: 0.1rem;
					}
					.icon5 {
						width: 0.55rem;
						height: 0.55rem;
						margin-right: 0.1rem;
					}
				}
			}
		}
		.fwjg {
			// 服务机构
			.content {
				margin-top: 0.4rem;
				padding: 0.4rem 0.3rem;
				width: 100%;
				box-shadow: @shadow;
				border-radius: 15px;
				height: auto;
				.title {
					margin-bottom: 0.5rem;
					.text1 {
						font-size: 0.3rem;
						color: #111111;
					}
					.text2 {
						font-size: 0.25rem;
						color: #0a89ff;
					}
				}
				.item {
					width: 100%;
					margin-bottom: 0.8rem;
					position: relative;
					img {
						width: 1.8rem;
						height: 1.2rem;
						margin-right: 0.15rem;
					}
					.text1 {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						font-size: 0.28rem;
						color: #111111;
						font-weight: bold;
						margin-bottom: 0.1rem;
					}
					.text2 {
						font-size: 0.25rem;
						color: #aaaaaa;
					}
				}
			}
		}
	}
}
#MarketService_old {
	padding-left: 0.1rem;
	padding-right: 0.1rem;

	.content {
		// min-height: 100vh;
		.scfw {
			// 市场服务
			.top {
				display: grid;
				grid-template-columns: repeat(auto-fit, 32%);
				grid-gap: 2%;
				.item {
					background: #ffffff;
					height: 1.4rem;
					box-shadow: @shadow;
					border-radius: 15px;
					font-size: 0.3rem;
					.icon1 {
						height: 0.5rem;
						width: 0.5rem;
						margin-right: 0.1rem;
					}
					.icon2 {
						height: 0.55rem;
						width: 0.43rem;
						margin-right: 0.1rem;
					}
					.icon3 {
						height: 0.45rem;
						width: 0.47rem;
						margin-right: 0.1rem;
					}
				}
			}
			.center {
				width: 100%;
				height: 0.75rem;
				position: relative;
				margin-top: 0.5rem;
				.icon1 {
					width: 0.32rem;
					height: 0.33rem;
					position: absolute;
					left: 0.3rem;
					top: 0.2rem;
				}
				.input {
					padding-left: 0.8rem;
					border-radius: 38px;
					box-shadow: @shadow;
					width: 100%;
					height: 100%;
					background: #ffffff;
					border: none;
				}
				.button {
					position: absolute;
					right: 0.4rem;
					top: 0.2rem;
				}
			}
			.bottom {
				margin-top: 0.55rem;
				padding: 0.4rem 0.3rem;
				width: 100%;
				box-shadow: @shadow;
				border-radius: 15px;

				.title {
					margin-bottom: 0.5rem;
					.text1 {
						font-size: 0.3rem;
						color: #111111;
					}
					.text2 {
						font-size: 0.25rem;
						color: #aaaaaa;
					}
				}
				// .item {
				// 	width: 100%;
				// 	margin-bottom: 0.8rem;
				// 	position: relative;
				// 	img {
				// 		width: 1.8rem;
				// 		height: 1.2rem;
				// 		margin-right: 0.15rem;
				// 	}
				// 	.text1 {
				// 		display: -webkit-box;
				// 		-webkit-box-orient: vertical;
				// 		-webkit-line-clamp: 2;
				// 		overflow: hidden;
				// 		font-size: 0.28rem;
				// 		color: #111111;
				// 		font-weight: bold;
				// 		margin-bottom: 0.1rem;
				// 	}
				// 	.text2 {
				// 		font-size: 0.23rem;
				// 		width: 50%;
				// 		color: #aaaaaa;
				// 		display: -webkit-box;
				// 		-webkit-box-orient: vertical;
				// 		-webkit-line-clamp: 1;
				// 		overflow: hidden;
				// 	}
				// }
			}
		}
		.qyfn {
			// 企业赋能
			.top {
				display: grid;
				grid-template-columns: repeat(auto-fit, 49%);
				grid-gap: 2%;
				.item {
					background: #ffffff;
					height: 1.4rem;
					box-shadow: @shadow;
					border-radius: 15px;
					font-size: 0.3rem;
					margin-bottom: 0.43rem;
					.icon1 {
						width: 0.6rem;
						height: 0.46rem;
						margin-right: 0.1rem;
					}
					.icon2 {
						width: 0.4rem;
						height: 0.47rem;
						margin-right: 0.1rem;
					}
					.icon3 {
						width: 0.57rem;
						height: 0.56rem;
						margin-right: 0.1rem;
					}
					.icon4 {
						width: 0.49rem;
						height: 0.45rem;
						margin-right: 0.1rem;
					}
					.icon5 {
						width: 0.55rem;
						height: 0.55rem;
						margin-right: 0.1rem;
					}
				}
			}
		}
		.fwjg {
			// 服务机构
			.content {
				margin-top: 0.4rem;
				padding: 0.4rem 0.3rem;
				width: 100%;
				box-shadow: @shadow;
				border-radius: 15px;
				height: auto;
				.title {
					margin-bottom: 0.5rem;
					.text1 {
						font-size: 0.3rem;
						color: #111111;
					}
					.text2 {
						font-size: 0.25rem;
						color: #0a89ff;
					}
				}
				.item {
					width: 100%;
					margin-bottom: 0.8rem;
					position: relative;
					img {
						width: 1.8rem;
						height: 1.2rem;
						margin-right: 0.15rem;
					}
					.text1 {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						font-size: 0.28rem;
						color: #111111;
						font-weight: bold;
						margin-bottom: 0.1rem;
					}
					.text2 {
						font-size: 0.25rem;
						color: #aaaaaa;
					}
				}
			}
		}
	}
	/deep/ .van-tab {
		font-size: 20px !important;
	}
}
</style>
<style lang="less" scoped>
/deep/.van-list {
	padding-bottom: 1rem;
}
</style>